@import "../../../assets/style/default";

.container{
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 80vw;
  background: @fill-body;
  overflow: hidden;
  color: @color-text-paragraph;

  .header{
    position: relative;
    height: 28vh;
    background:#d8bcac;

    &>div{
      position: absolute;
      left: 0;
      bottom: 10px;
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 20px;

      img{
        width: 80px;
        height: 80px;
        object-fit: cover;    //解决图片被拉伸的问题
        border-radius: @radius-circle;
        padding: 0 20px;
      }
    }
  }

  .contenr{

   .section{
     .divider{
       border-bottom: 1px solid #d3d4da;
       margin-top: 10px;
     }

     .title{
       height: 40px;
       color: #666;
       line-height: 40px;
       padding: 0 10px;
       margin-top: 10px;
     }

     ul{
       li{
         display: flex;
         align-items: center;
         height: 45px;
         font-size: @font-size-base;
         padding: 0 10px;

         div:first-child{
           width: 20px;
           height: 20px;
           font-weight: bold;
           font-size: 20px;

         }
         div:nth-child(2){
           flex-grow: 1;
           margin: 0 20px;
         }
       }
     }
   }
  }
}

//动画效果
.side-up-init{
  li{
    overflow: visible;
    transform: translate(100px,100px);
    opacity: 0;
  }

  li:nth-child(1) {transition-delay: .08s;}

  li:nth-child(2){transition-delay: .16s;}

  li:nth-child(3) {transition-delay: .24s;}

  li:nth-child(4) {transition-delay: .32s;}

  li:nth-child(5) {transition-delay: .40s;}

  li:nth-child(6){transition-delay: .48s;}
}

.side-up{
  li{
    transform: translate(0,0);
    transition: all 0.4s;
    opacity: 1;
  }
}

.fade-init{
  opacity: 0;
}
.fade{
  transition: all 0.4s;
  transition-delay: 1s;
  opacity: 1;
}